<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂响应式网站</title>
    <style>
        /* 基础样式与CSS变量 */
        :root {
            --primary-color: #4a6cf7;
            --secondary-color: #6f42c1;
            --accent-color: #20c997;
            --text-color: #333;
            --bg-color: #fff;
            --card-bg: #f8f9fa;
            --header-bg: rgba(255, 255, 255, 0.95);
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        .dark-mode {
            --primary-color: #6c8dfa;
            --secondary-color: #8a67c9;
            --accent-color: #2dd4a7;
            --text-color: #f0f0f0;
            --bg-color: #1a1a2e;
            --card-bg: #16213e;
            --header-bg: rgba(26, 26, 46, 0.95);
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            transition: var(--transition);
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--primary-color);
            color: white;
            border-radius: 5px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5rem;
            color: var(--primary-color);
        }

        .section-subtitle {
            text-align: center;
            margin-bottom: 60px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            color: var(--text-color);
            opacity: 0.8;
        }

        /* 导航栏样式 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: var(--header-bg);
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .nav-menu {
            display: flex;
            gap: 30px;
        }

        .nav-link {
            font-weight: 600;
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--primary-color);
        }

        .theme-toggle {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.5rem;
            margin-left: 20px;
            color: var(--text-color);
        }

        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.8rem;
        }

        /* 英雄区域样式 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(74, 108, 247, 0.1) 0%, rgba(111, 66, 193, 0.1) 100%);
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://picsum.photos/1920/1080?blur=2') no-repeat center center/cover;
            z-index: -1;
            opacity: 0.3;
        }

        .hero-content {
            max-width: 650px;
        }

        .hero-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
        }

        /* 关于区域样式 */
        .about-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            align-items: center;
        }

        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .tab-btn {
            padding: 12px 25px;
            background: none;
            border: none;
            cursor: pointer;
            font-weight: 600;
            position: relative;
            color: var(--text-color);
            opacity: 0.7;
            transition: var(--transition);
        }

        .tab-btn.active {
            opacity: 1;
            color: var(--primary-color);
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-color);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .skills-container {
            margin-top: 30px;
        }

        .skill {
            margin-bottom: 20px;
        }

        .skill-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .skill-bar {
            height: 10px;
            background: #e9ecef;
            border-radius: 5px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background: var(--primary-color);
            border-radius: 5px;
            width: 0;
            transition: width 1s ease;
        }

        /* 作品集样式 */
        .portfolio-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 40px;
        }

        .filter-btn {
            padding: 8px 20px;
            background: var(--card-bg);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: var(--transition);
        }

        .filter-btn.active, .filter-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        .portfolio-item {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            background: var(--card-bg);
        }

        .portfolio-item:hover {
            transform: translateY(-10px);
        }

        .portfolio-img {
            height: 250px;
            width: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .portfolio-item:hover .portfolio-img {
            transform: scale(1.05);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
            padding: 20px;
            text-align: center;
            color: white;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .portfolio-desc {
            margin-bottom: 15px;
        }

        /* 联系表单样式 */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 50px;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .contact-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
        }

        .contact-form {
            background: var(--card-bg);
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: var(--bg-color);
            color: var(--text-color);
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 5px;
            display: none;
        }

        /* 灯箱样式 */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }

        .lightbox.open {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }

        .lightbox-img {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 5px;
        }

        .lightbox-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 2rem;
            background: none;
            border: none;
            cursor: pointer;
        }

        .lightbox-caption {
            color: white;
            text-align: center;
            margin-top: 15px;
            font-size: 1.2rem;
        }

        /* 页脚样式 */
        footer {
            background: var(--card-bg);
            padding: 60px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .footer-heading {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-link {
            transition: var(--transition);
        }

        .footer-link:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        .social-link:hover {
            background: var(--secondary-color);
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .about-grid,
            .contact-container {
                grid-template-columns: 1fr;
            }

            .hero-title {
                font-size: 2.8rem;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 80px;
                left: -100%;
                flex-direction: column;
                background: var(--header-bg);
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: var(--shadow);
                padding: 20px 0;
                gap: 15px;
            }

            .nav-menu.active {
                left: 0;
            }

            .hamburger {
                display: block;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: flex-start;
            }

            .section-title {
                font-size: 2rem;
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 2.2rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .tabs {
                flex-direction: column;
            }

            .tab-btn {
                width: 100%;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">ComplexDesign</a>
                <ul class="nav-menu">
                    <li><a href="#home" class="nav-link">首页</a></li>
                    <li><a href="#about" class="nav-link">关于</a></li>
                    <li><a href="#portfolio" class="nav-link">作品</a></li>
                    <li><a href="#contact" class="nav-link">联系</a></li>
                </ul>
                <div class="nav-buttons">
                    <button class="theme-toggle" id="themeToggle">🌙</button>
                    <div class="hamburger" id="hamburger">☰</div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">创造卓越的数字体验</h1>
                <p class="hero-description">我们是一家专注于网站设计与开发的工作室，致力于为客户提供创新、高效的解决方案，帮助他们在数字世界中脱颖而出。</p>
                <div class="hero-buttons">
                    <a href="#portfolio" class="btn">查看作品</a>
                    <a href="#contact" class="btn" style="background: var(--secondary-color);">联系我们</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于区域 -->
    <section class="section" id="about">
        <div class="container">
            <h2 class="section-title">关于我们</h2>
            <p class="section-subtitle">我们是一支充满激情的设计与开发团队，专注于创造美观且功能强大的数字产品。</p>
            
            <div class="about-grid">
                <div>
                    <div class="tabs">
                        <button class="tab-btn active" data-tab="tab-1">我们的故事</button>
                        <button class="tab-btn" data-tab="tab-2">我们的使命</button>
                        <button class="tab-btn" data-tab="tab-3">我们的愿景</button>
                    </div>
                    
                    <div class="tab-content active" id="tab-1">
                        <p>自2010年成立以来，我们一直致力于为客户提供卓越的数字解决方案。我们的团队由经验丰富的设计师和开发人员组成，他们精通最新的技术和设计趋势。</p>
                        <p>我们相信，优秀的设计不仅仅是外观漂亮，更重要的是提供无缝的用户体验和实现商业目标。</p>
                    </div>
                    
                    <div class="tab-content" id="tab-2">
                        <p>我们的使命是通过创新的数字解决方案帮助企业实现其目标。我们致力于理解每个客户的独特需求，并提供量身定制的解决方案。</p>
                        <p>我们注重细节，追求卓越，确保每个项目都能超越客户的期望。</p>
                    </div>
                    
                    <div class="tab-content" id="tab-3">
                        <p>我们的愿景是成为行业领先的数字创新工作室，通过技术和创意改变企业与用户互动的方式。</p>
                        <p>我们希望通过我们的工作，让数字世界变得更加美好、更加人性化。</p>
                    </div>

                    <div class="skills-container">
                        <div class="skill">
                            <div class="skill-info">
                                <span>UI/UX 设计</span>
                                <span>95%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="95%"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-info">
                                <span>前端开发</span>
                                <span>90%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="90%"></div>
                            </div>
                        </div>
                        
                        <div class="skill">
                            <div class="skill-info">
                                <span>品牌策略</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" data-width="85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <img src="https://picsum.photos/600/400?random=1" alt="关于我们" class="about-img">
                </div>
            </div>
        </div>
    </section>

    <!-- 作品集区域 -->
    <section class="section" id="portfolio" style="background: var(--card-bg);">
        <div class="container">
            <h2 class="section-title">我们的作品</h2>
            <p class="section-subtitle">探索我们最近完成的项目，这些项目展示了我们在设计和开发方面的专业能力。</p>
            
            <div class="portfolio-filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="web">网站设计</button>
                <button class="filter-btn" data-filter="app">应用开发</button>
                <button class="filter-btn" data-filter="brand">品牌设计</button>
            </div>
            
            <div class="portfolio-grid">
                <div class="portfolio-item" data-category="web">
                    <img src="https://picsum.photos/400/300?random=2" alt="项目1" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">电子商务网站</h3>
                        <p class="portfolio-desc">为时尚品牌设计的现代化电子商务平台</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=2" data-title="电子商务网站">查看项目</button>
                    </div>
                </div>
                
                <div class="portfolio-item" data-category="app">
                    <img src="https://picsum.photos/400/300?random=3" alt="项目2" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">健身应用</h3>
                        <p class="portfolio-desc">帮助用户跟踪健身进度和营养摄入的移动应用</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=3" data-title="健身应用">查看项目</button>
                    </div>
                </div>
                
                <div class="portfolio-item" data-category="brand">
                    <img src="https://picsum.photos/400/300?random=4" alt="项目3" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">品牌重塑</h3>
                        <p class="portfolio-desc">为科技初创公司进行的全面品牌重塑</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=4" data-title="品牌重塑">查看项目</button>
                    </div>
                </div>
                
                <div class="portfolio-item" data-category="web">
                    <img src="https://picsum.photos/400/300?random=5" alt="项目4" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">教育平台</h3>
                        <p class="portfolio-desc">在线学习平台的设计与开发</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=5" data-title="教育平台">查看项目</button>
                    </div>
                </div>
                
                <div class="portfolio-item" data-category="app">
                    <img src="https://picsum.photos/400/300?random=6" alt="项目5" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">旅行规划应用</h3>
                        <p class="portfolio-desc">帮助用户规划完美旅行的移动应用</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=6" data-title="旅行规划应用">查看项目</button>
                    </div>
                </div>
                
                <div class="portfolio-item" data-category="brand">
                    <img src="https://picsum.photos/400/300?random=7" alt="项目6" class="portfolio-img">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">餐厅品牌设计</h3>
                        <p class="portfolio-desc">为高端餐厅创建的完整品牌标识系统</p>
                        <button class="btn view-project" data-image="https://picsum.photos/800/600?random=7" data-title="餐厅品牌设计">查看项目</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系区域 -->
    <section class="section" id="contact">
        <div class="container">
            <h2 class="section-title">联系我们</h2>
            <p class="section-subtitle">有兴趣与我们合作？请填写下面的表格，我们会尽快与您联系。</p>
            
            <div class="contact-container">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div>
                            <h3>地址</h3>
                            <p>北京市朝阳区创意园区88号</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <div>
                            <h3>电话</h3>
                            <p>+86 10 8888 8888</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">✉️</div>
                        <div>
                            <h3>邮箱</h3>
                            <p>info@complexdesign.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">⏰</div>
                        <div>
                            <h3>工作时间</h3>
                            <p>周一至周五: 9:00 - 18:00</p>
                        </div>
                    </div>
                </div>
                
                <form class="contact-form" id="contactForm">
                    <div class="form-group">
                        <label for="name" class="form-label">您的姓名</label>
                        <input type="text" id="name" class="form-control" placeholder="请输入您的姓名">
                        <div class="error-message" id="nameError">请输入有效的姓名</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="email" class="form-label">您的邮箱</label>
                        <input type="email" id="email" class="form-control" placeholder="请输入您的邮箱">
                        <div class="error-message" id="emailError">请输入有效的邮箱地址</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject" class="form-label">主题</label>
                        <input type="text" id="subject" class="form-control" placeholder="请输入主题">
                        <div class="error-message" id="subjectError">请输入主题</div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="form-label">您的消息</label>
                        <textarea id="message" class="form-control" placeholder="请输入您的消息"></textarea>
                        <div class="error-message" id="messageError">请输入您的消息</div>
                    </div>
                    
                    <button type="submit" class="btn">发送消息</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div>
                    <h3 class="footer-heading">ComplexDesign</h3>
                    <p>我们致力于创造卓越的数字体验，帮助企业在数字时代取得成功。</p>
                    <div class="social-links">
                        <a href="#" class="social-link">📱</a>
                        <a href="#" class="social-link">💬</a>
                        <a href="#" class="social-link">📸</a>
                        <a href="#" class="social-link">🐦</a>
                    </div>
                </div>
                
                <div>
                    <h3 class="footer-heading">快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#home" class="footer-link">首页</a></li>
                        <li><a href="#about" class="footer-link">关于我们</a></li>
                        <li><a href="#portfolio" class="footer-link">作品集</a></li>
                        <li><a href="#contact" class="footer-link">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="footer-heading">服务</h3>
                    <ul class="footer-links">
                        <li><a href="#" class="footer-link">网站设计</a></li>
                        <li><a href="#" class="footer-link">应用开发</a></li>
                        <li><a href="#" class="footer-link">UI/UX 设计</a></li>
                        <li><a href="#" class="footer-link">品牌设计</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="footer-heading">订阅通讯</h3>
                    <p>订阅我们的通讯，获取最新设计和开发趋势。</p>
                    <form>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="请输入您的邮箱">
                        </div>
                        <button type="submit" class="btn">订阅</button>
                    </form>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 ComplexDesign. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 灯箱 -->
    <div class="lightbox" id="lightbox">
        <div class="lightbox-content">
            <button class="lightbox-close" id="lightboxClose">×</button>
            <img src="" alt="" class="lightbox-img" id="lightboxImg">
            <div class="lightbox-caption" id="lightboxCaption"></div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 导航菜单切换
            const hamburger = document.getElementById('hamburger');
            const navMenu = document.querySelector('.nav-menu');
            
            hamburger.addEventListener('click', function() {
                navMenu.classList.toggle('active');
                hamburger.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
            });
            
            // 主题切换
            const themeToggle = document.getElementById('themeToggle');
            
            themeToggle.addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
            });
            
            // 标签切换
            const tabBtns = document.querySelectorAll('.tab-btn');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有活动类
                    tabBtns.forEach(b => b.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
                    
                    // 添加活动类到当前标签
                    this.classList.add('active');
                    document.getElementById(this.dataset.tab).classList.add('active');
                });
            });
            
            // 技能进度条动画
            const skills = document.querySelectorAll('.skill-progress');
            
            function animateSkills() {
                skills.forEach(skill => {
                    skill.style.width = skill.dataset.width;
                });
            }
            
            // 使用Intersection Observer来触发技能动画
            const skillsSection = document.querySelector('.skills-container');
            
            if (skillsSection) {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            animateSkills();
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.5 });
                
                observer.observe(skillsSection);
            }
            
            // 作品集过滤
            const filterBtns = document.querySelectorAll('.filter-btn');
            const portfolioItems = document.querySelectorAll('.portfolio-item');
            
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有活动类
                    filterBtns.forEach(b => b.classList.remove('active'));
                    
                    // 添加活动类到当前按钮
                    this.classList.add('active');
                    
                    const filterValue = this.dataset.filter;
                    
                    portfolioItems.forEach(item => {
                        if (filterValue === 'all' || item.dataset.category === filterValue) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
            
            // 灯箱功能
            const lightbox = document.getElementById('lightbox');
            const lightboxImg = document.getElementById('lightboxImg');
            const lightboxCaption = document.getElementById('lightboxCaption');
            const lightboxClose = document.getElementById('lightboxClose');
            const viewProjectBtns = document.querySelectorAll('.view-project');
            
            viewProjectBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    lightboxImg.src = this.dataset.image;
                    lightboxCaption.textContent = this.dataset.title;
                    lightbox.classList.add('open');
                    document.body.style.overflow = 'hidden';
                });
            });
            
            lightboxClose.addEventListener('click', closeLightbox);
            
            lightbox.addEventListener('click', function(e) {
                if (e.target === lightbox) {
                    closeLightbox();
                }
            });
            
            function closeLightbox() {
                lightbox.classList.remove('open');
                document.body.style.overflow = 'auto';
            }
            
            // 表单验证
            const contactForm = document.getElementById('contactForm');
            
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    let isValid = true;
                    
                    // 验证姓名
                    const nameInput = document.getElementById('name');
                    const nameError = document.getElementById('nameError');
                    
                    if (nameInput.value.trim() === '') {
                        nameError.style.display = 'block';
                        isValid = false;
                    } else {
                        nameError.style.display = 'none';
                    }
                    
                    // 验证邮箱
                    const emailInput = document.getElementById('email');
                    const emailError = document.getElementById('emailError');
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    
                    if (!emailRegex.test(emailInput.value)) {
                        emailError.style.display = 'block';
                        isValid = false;
                    } else {
                        emailError.style.display = 'none';
                    }
                    
                    // 验证主题
                    const subjectInput = document.getElementById('subject');
                    const subjectError = document.getElementById('subjectError');
                    
                    if (subjectInput.value.trim() === '') {
                        subjectError.style.display = 'block';
                        isValid = false;
                    } else {
                        subjectError.style.display = 'none';
                    }
                    
                    // 验证消息
                    const messageInput = document.getElementById('message');
                    const messageError = document.getElementById('messageError');
                    
                    if (messageInput.value.trim() === '') {
                        messageError.style.display = 'block';
                        isValid = false;
                    } else {
                        messageError.style.display = 'none';
                    }
                    
                    // 如果表单有效，显示成功消息
                    if (isValid) {
                        alert('感谢您的消息！我们会尽快回复您。');
                        contactForm.reset();
                    }
                });
            }
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        // 关闭移动端菜单
                        navMenu.classList.remove('active');
                        hamburger.textContent = '☰';
                        
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>